<template>
  <gui-page
    ref="pageRef"
    :api-loading-status="apiLoadingStatus"
    :custom-footer="true"
    :custom-header="true"
    :footer-class="['gui-bg-white']"
    :full-page="true"
    :is-loading="pageLoading"
    :status-bar-class="['gui-bg-white']"
  >
    <template #gHeader>
      <view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-bg-white gui-border-b" style="height: 44px">
        <!-- 导航文本此处也可以是其他自定义内容 -->
        <gui-header-leading :home="false" />
        <text class="gui-h5 gui-flex1 gui-text-center gui-ellipsis gui-primary-text">提现</text>
        <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
        <view style="width: 120rpx" />
      </view>
    </template>
    <template #gBody>
      <view class="gui-flex gui-flex1 gui-column gui-relative">
        <view class="gui-text-small gui-flex gui-align-items-center gui-bg-gray gui-padding">
          <view class="">提现到</view>
          <view class="gui-h5 gui-bold gui-primary-text gui-margin-x gui-flex1">微信零钱</view>
        </view>
        <view class="gui-flex gui-flex1 gui-column gui-padding gui-bg-white" style="border-radius: 40rpx 40rpx 0 0">
          <!--   数据列表     -->
          <view class="gui-border-radius-large">
            <view class="gui-margin-top-small">
              <text class="gui-secondary-text">提现金额</text>
            </view>
            <view class="gui-bg-white gui-dark-bg-level-3">
              <view class="gui-form-item gui-border-b">
                <text class="gui-secondary-text gui-bold gui-h3">￥</text>
                <view class="gui-form-body" @tap="getFocus">
                  <input v-model="money" class="gui-form-input" :disabled="true" name="money" placeholder="请输入提现金额" type="text" />
                </view>
              </view>
            </view>
            <view class="gui-text-small gui-flex gui-padding-small gui-align-items-center">
              <view>我的余额￥{{ allMoney }}，</view>
              <button class="gui-button gui-noborder gui-button-mini" :plain="true" type="default" @tap.stop="money = allMoney">
                <text class="gui-icons gui-button-text-mini gui-primary-color">全部转入</text>
              </button>
            </view>
          </view>
        </view>
      </view>
      <money-keyboard
        v-if="keyboardStatus"
        bg-color="rgba(255,255,255,0)"
        :digit-num="2"
        :max="allMoney"
        :show-input-res="false"
        :value="money"
        :z-index="9999"
        @keyboard-delete="keyboardDelete"
        @keyboard-done="handleCash"
        @keyboard-input="keyboardInput"
      />
    </template>
    <template #gFooter>
      <copyright-info />
    </template>
  </gui-page>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const pageRef = ref<any>(null)
const keyboardStatus = ref<boolean>(false)
// 页面加载
const pageLoading = ref<boolean>(false)
// 用于记录是否有 api 请求正在执行
const apiLoadingStatus = ref<boolean>(false)
const money = ref<string>('')
const allMoney = ref<string>('')

const getFocus = () => {
  console.log(111)
  keyboardStatus.value = true
}
// 输入金额
const keyboardInput = (e: string) => {
  money.value = money.value + e
  if (Number(money.value) > Number(allMoney.value)) money.value = allMoney.value
}
const keyboardDelete = () => {
  money.value = money.value.substring(0, money.value.length - 1)
}
const handleCash = () => {
  console.log('完成')
  keyboardStatus.value = false
}

onLoad((option: any) => {
  allMoney.value = option.money
})
</script>

<style scoped></style>
